<!DOCTYPE HTML>
<html>
	<head>
		<title>Welcome to your ExpressLRS System</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="main.css" />
		<script>
			var websock;
			function start() {
				document.getElementById("logField").scrollTop = document.getElementById("logField").scrollHeight;
				websock = new WebSocket('ws://' + window.location.hostname + ':81/');
				websock.onopen = function (evt) { console.log('websock open'); };
				websock.onclose = function(e) {
				  console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
				  setTimeout(function() {
					start();
				  }, 1000);
				};
				websock.onerror = function (evt) { console.log(evt); };
				websock.onmessage = function (evt) {
					console.log(evt);
					var d = new Date();
					var n = d.toISOString();
					document.getElementById("logField").value += n + ' ' + evt.data + '\n';
					document.getElementById("logField").scrollTop = document.getElementById("logField").scrollHeight;
				};
			}
	
			function saveTextAsFile() {
				var textToWrite = document.getElementById('logField').innerHTML;
				var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
				var fileNameToSaveAs = "tx_log.txt";
	
				var downloadLink = document.createElement("a");
				downloadLink.download = fileNameToSaveAs;
				downloadLink.innerHTML = "Download File";
				if (window.webkitURL != null) {
					// Chrome allows the link to be clicked without actually adding it to the DOM.
					downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
				} else {
					// Firefox requires the link to be added to the DOM before it can be clicked.
					downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
					downloadLink.onclick = destroyClickedElement;
					downloadLink.style.display = "none";
					document.body.appendChild(downloadLink);
				}
	
				downloadLink.click();
			}
	
			function destroyClickedElement(event) {
				// remove the link from the DOM
				document.body.removeChild(event.target);
			}
		</script>
	</head>
	<body onload="javascript:start();">
	<!-- OI you! get out of my source code!!! jk-->
		<!-- Header -->
			<section id="header">
				<div class="inner">
					<img src="" height="250" width="250" style="padding:20px;"></a>
					<h1>Welcome to your <b>ExpressLRS</b><br/> update page</h1>
					<p>From here you can update the firmwares on your R9M Tx module and WiFi Backpack module</p>
					<p><b>Firmware Rev.  </b><var id="FirmVersion">1.0</var></p>
				</div>
			</section>
		<!-- One -->
			<br>
			<section id="one" class="main style1">
				<div class="container">
					<hr>
					<div align="left">
						<fieldset>
							<legend>
								<h2>Firmware Update Status:</h2>
							</legend>
							<div>Use the following command to connect the websocket using 'curl', which is a lot faster over the terminal than browser:</div>
							<textarea id="curlCmd" rows="24" cols="80" style="margin: 0px; height: 270px; width: 350px;background-color: #252525;Color: #C5C5C5;border-radius: 5px;border: none;font-size: 11pt;">
curl --include \
 --output - \
 --no-buffer \
 --header "Connection: Upgrade" \
 --header "Upgrade: websocket" \
 --header "Host: example.com:80" \
 --header "Origin: http://example.com:80" \
 --header "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ==" \
 --header "Sec-WebSocket-Version: 13" \
 http://elrs_tx.local:81/
							</textarea>
							<div>Alternatively, you can use the log area below to view messages:</div>
							<textarea id="logField" rows="24" cols="80" style="font-size: 11pt;">BEGIN LOG</textarea><br/>
							<button type="button" onclick="saveTextAsFile()" value="save" id="save">Save log to file</button>
						</fieldset>
					</div>
					<hr>
					<div align="left">
						<fieldset>
							<legend>
								<h2>R9M Tx Firmware Update:</h2>
							</legend>
							<form method='POST' action='/upload' enctype='multipart/form-data'>
								<input type='file' accept='.bin' name='filesystem'>
         						<input type='submit' value='Upload and Flash R9M Tx'>
							</form>
							<div style="color:red;">CAUTION! Be careful to upload the correct firmware file, otherwise a bad flash may occur! If this happens you will need to re-flash the module's firmware via USB/Serial.</div>
						</fieldset>
					</div>
					<hr>
					<div align="left">
						<fieldset>
							<legend>
								<h2>WiFi Backpack Firmware Update:</h2>
							</legend>
							<form method='POST' action='/update' enctype='multipart/form-data'>
								<input type='file' accept='.bin' name='firmware'>
         						<input type='submit' value='Flash WiFi Backpack'>
							</form>
							<div style="color:red;">CAUTION! Be careful to upload the correct firmware file, otherwise a bad flash may occur! If this happens you will need to re-flash the module's firmware via USB/Serial.</div>
						</fieldset>
					</div>
					<hr>
					<div align="left">
						<legend>
							<h2>Useful Links and Support:</h2>
						</legend>
						<h4><a href="https://github.com/AlessandroAU/ExpressLRS">GitHub Repository</a><h4>
						<h4><a href="https://discord.gg/dS6ReFY">Discord Chat</a><h4>
					</div>
				</div>
			</section>
	</body>
</html>